<template>
    <div class="groupDetails" v-if="showPage">
      <div class="groupDetails-header">
        <img class="bg-img" :src="picPre+initInfo.background_img" :lazy-load="true" mode="scaleToFill" alt="">
        <div class="bg-img"></div>
        <div class="navbar" :style="{height: navBarHeight + 'px',lineHeight: navBarHeight + 'px'}">
          <div class="nav-statusbar" :style="{height: statusBarHeight + 'px'}"></div>
          <div  class="bar-title iconfont iconfanhui" ﻿@tap="back" style="color: #ffffff;font-size: 40rpx;margin: 0 30rpx;" :style="{height: titleBarHeight + 'px',lineHeight: titleBarHeight + 'px'}">
          </div>
        </div>
      </div>
      <div class="groupDetails-main">
        <div class="groupDetails-title">
          <p><img :src="picPre+initInfo.cover" alt=""></p>
          <p>{{initInfo.name}}</p>
        </div>
        <div>
          <h1>群聊成员</h1>
          <p>共{{initInfo.member_num}}名群成员</p>
        </div>
        <div class="groupDetails-roll">
          <scroll-view scroll-x="true" style="width: 100%" enable-flex="true" class="ac-wrapper">
            <div class="ac-item" v-for="(item, index) in initInfo.member" :key="index">
              <img :lazy-load="true" :src="item.head_img ? picPre + item.head_img : picPre + 'front/avatar.jpg'" alt="" mode="aspectFill">
              <div class="name">{{item.username}}</div>
            </div>
          </scroll-view>
        </div>
        <p class="groupDetails-intro">{{initInfo.describe}}</p>
        <div>
          <p v-if="initInfo.is_add === 'yes'" class="addGroupFont">已加入此群组</p>
          <p v-else class="joinGroup" ﻿@tap="joinBtn(initInfo.id)">加入群组</p>
        </div>
        <div class="hotPostTitle">
          <p>热门发帖</p>
          <i class="iconfont iconsousuo1" ﻿@tap="toPage()" style="font-size: 48rpx;color: #F05955;"></i>
        </div>
        <div class="empty" v-if="Posts.length === 0">暂无发帖</div>
        <comment @refresh="refresh" :Posts="Posts" :jurisdiction="true" v-else></comment>
      </div>
    </div>
</template>

<script>
  import comment from "@/components/comment/index"
  import { mapState } from 'vuex'
    export default {
        name: "groupDetails",
      components:{
        comment
      },
      data(){
          let that = this;
          return{
            picPre: that.$api.picPre,
            id: "",
            showPage: true,
            initInfo:{},
            member:[],
            Posts:[],
            loadingEnd:{
              moduleOne: false,
              moduleTwo: false
            },
            navBarHeight: 0,
            titleBarHeight: 44,
            statusBarHeight: 0,
          }
      },
      methods:{
        back(){
			uni.navigateBack({
				delta: 1
			})
        },
        toPage(){
          if(!this.isLogin) {
              let that = this;
              ﻿uni.showModal({
                title: '亲，您尚未登录',
                content: '前去登录吧~',
                success(res) {
                  if (res.confirm) {
                    ﻿uni.navigateTo({ 				  	url:'/person/login' 				  })
                  }
                }
              });
            } else {
              if (this.initInfo.is_add === 'yes') {
				  uni.navigateTo({
				  	url: '/social/searchResult?id=' + this.id
				  })
              }
              else {
                ﻿uni.showToast({
                  title: "暂无此权限，请加入群组！",
                  icon: 'none',
                  duration: 2000
                })
              }
            }
        },
        refresh(){
          this.getPostsList();
        },
        joinBtn(id){
          if(!this.isLogin){
            let that = this;
            ﻿uni.showModal({
              title: '亲，您尚未登录',
              content: '前去登录吧~',
              success (res) {
                if (res.confirm) {
                  ﻿uni.navigateTo({ 				  	url:'/person/login' 				  })
                }
              }
            });
          }
          else {
            this.$ajax
              .post(this.$api.addGroup, { id: id })
              .then(res => {
                ﻿uni.showToast({
                  title: "加入成功！",
                  icon: 'success',
                  duration: 2000
                });
                this.initInfo.is_add = 'yes';
                this.getPostsList();
              })
              .catch(err => {
                ﻿uni.showToast({
                  title: err,
                  icon: 'none',
                  duration: 2000
                })
              });
          }
        },
        getGroupDetail(){
          this.$ajax
            .post(this.$api.groupDetail,{id:this.id})
            .then(res => {
              this.initInfo = res;
              this.loadingEnd.moduleOne = true;
            })
            .catch(err => {
              this.loadingEnd.moduleOne = true;
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        },
        getPostsList(){
          this.$ajax
            .post(this.$api.postsList,{
              group_id:this.id,
              page_size: 2
            })
            .then(res => {
              this.Posts = res.data;
              this.loadingEnd.moduleTwo = true;
            })
            .catch(err => {
              this.loadingEnd.moduleTwo = true;
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        },
        viewLoad(){
          this.loadingEnd = {
            moduleOne: false,
            moduleTwo: false
          };
          ﻿uni.showLoading({
            title: '加载中',
            mask: true
          });
          this.getGroupDetail();
          this.getPostsList();
        },
      },
      computed:{
        ...mapState([
          'isLogin'
        ]),
        hideLoading(){
          if(this.loadingEnd.moduleOne && this.loadingEnd.moduleTwo){
            setTimeout(function(){
              ﻿uni.hideLoading()
            }, 800)
          }
        }
      },
      onPullDownRefresh(){
        this.viewLoad()
        ﻿uni.stopPullDownRefresh() //停止下拉刷新
      },
      ﻿onShareAppMessage(res){
  ﻿this.$common.share()
  },
      onLoad(res){
        ﻿uni.showShareMenu({
          withShareTicket: true
        })
          this.id = res.id;
        const self = this;
        ﻿uni.getSystemInfo({
          success(system) {
            self.statusBarHeight = system.statusBarHeight;
            self.platform = system.platform;
            let platformReg = /ios/i;
            if (platformReg.test(system.platform)) {
              self.titleBarHeight = 44;
            } else {
              self.titleBarHeight = 48;
            }
            self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
          }
        });
          // this.viewLoad();
      },
      onHide(){
        this.showPage= false;
      },
      onShow(){
        this.viewLoad();
        this.showPage= true;
      },
    }
</script>

<style scoped>
.groupDetails-header{
  height: 402rpx;
  width: 100%;
  position: relative;
}
.navbar{
  position: relative;
  z-index: 10;
}
.groupDetails-header .bg-img {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 402rpx;
  background-color: rgba(40,40,40,0.4);
  z-index: 5;
}
  .groupDetails-main{
    position: relative;
    z-index: 10;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
.groupDetails-title{
  display: flex;
}
  .groupDetails-title>p:first-child{
    border-radius: 50%;
    border: 4rpx solid #ffffff;
    margin-top: -85rpx;
  }
.groupDetails-title>p:first-child>img{
  width: 162rpx;
  height: 162rpx;
  border-radius: 50%;
}
.groupDetails-title>p:last-child{
  font-size: 32rpx;
  color: #323232;
  font-weight: 500;
  margin-top: 19rpx;
  margin-left: 19rpx;
}
.groupDetails-title+div{
  display: flex;
  justify-content: space-between;
  margin-top: 37rpx;
  margin-left: 3rpx;
  font-size: 30rpx;
  font-weight: 500;
}
.groupDetails-title+div>h1{
  color: #323232;
}
.groupDetails-title+div>p{
  color: #828284;
}
.groupDetails-roll{
  padding: 30rpx 0;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1rpx solid #EEEEEE;
}
.groupDetails-roll .name{
  font-size: 24rpx;
    color: #323232;
    font-weight: 500;
}
.ac-wrapper{
  white-space: nowrap;
}
.ac-item{
  display: inline-block;
  padding: 0 17rpx 0 17rpx;
  text-align: center;
}
.ac-item img{
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
  .groupDetails-intro{
    font-size: 26rpx;
    color: #888888;
    font-weight: 500;
    line-height: 35rpx;
    padding: 30rpx 1rpx 38rpx;
  }
  .hotPostTitle{
    margin-top: 41rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
.hotPostTitle>p{
  width: 168rpx;
  height: 60rpx;
  background-color: #EF5A56;
  border-radius:10rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 34rpx;
  color: #ffffff;
  font-weight: bold;
}
.groupDetails-intro+div{
  display: flex;
  justify-content: center;
  padding-bottom: 40rpx;
  border-bottom: 14rpx solid #F7F7F7;
}
  .joinGroup{
    font-size: 30rpx;
    color: #EF5A56;
    font-weight: 500;
  }
  .addGroupFont{
    color: #77E6BC;
  }
  .empty{
    text-align: center;
    margin-top: 30px;
    color: gray;

  }
</style>
